<template>
	<!-- 我的转运 -->
	<view class="transport-box">
		<view class="tabs-box">
			<up-tabs :list="tabList" @click="tabsClick" :inactiveStyle="inactiveStyle" :activeStyle="activeStyle"
				:itemStyle="itemStyle" lineColor="#3296FA"></up-tabs>
		</view>
		<scroll-view scroll-y="true" style="height: 80vh;margin-top: 20rpx;" @scrolltolower="scrolltolower">
			<view class="zfb-list">
				<view class="zfb-item" v-for="(item,index) in listData" :key="index">
					<view class="item-top">
						<view class="top-left">
							<text>订单编号：</text>
							<text>{{item.sn}}</text>
						</view>
					</view>
					<view class="item-desc">
						<text class="desc-name">门店名称：</text>
						<text class="desc-value">{{item.express_company_name}}</text>
					</view>
					<view class="item-desc">
						<text class="desc-name">地址：</text>
						<text class="desc-value">{{item.sender_detail}}</text>
					</view>
					<view class="item-desc">
						<text class="desc-name">下单时间：</text>
						<text class="desc-value">{{item.createtime}}</text>
					</view>
					<view class="item-desc">
						<text class="desc-name">预估重量：</text>
						<text class="desc-value">{{item.express_company_code||0}}kg</text>
					</view>
					<!-- <view class="item-desc">
						<text class="desc-name">实际重量：</text>
						<text class="desc-value">{{item.sj_weight||0}}kg</text>
					</view> -->
				<!-- 	<view class="item-bottom" v-if="item.status==2">
						<view class="bottom-desc" @click="btnClick(item)">
							<up-button type="default" color="#3296FA">待审核</up-button>
						</view>
					</view> -->
				</view>
				<up-loadmore :status="status" />
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onBeforeMount
	} from 'vue'
	import {
		onLoad,
		onShow,
	} from "@dcloudio/uni-app"
	import {
		getOrderList
	} from '@/api/zfb.js'
	// tabs样式
	const itemStyle = ref({
		'padding-left': '15px',
		'padding-right': '15px',
		'height': '34px',
		'background': 'transparent'
	})
	const inactiveStyle = ref({
		'color': '#171717',
		'fontWeight': 'bold',
		'transform': 'scale(1)'
	})
	const activeStyle = ref({
		'color': '#3296FA',
		'fontWeight': 'bold',
		'transform': 'scale(1.05)'
	})
	// tabs切换
	const tabList = ref([{
			id: 1,
			name: '已下单'
		},
		{
			id: 2,
			name: '转运中'
		},
		{
			id: 6,
			name: '已完成'
		}
	])
	onMounted(()=>{
		getOrderData()
	})
	// 切换tabs
	const status = ref('nomore');
	const statusNum = ref(1)
	const tabsClick = (item) => {
		console.log(item);
		statusNum.value = item.id
		getOrderData()
	}
	// 运力列表
	const listData = ref([])
	const getOrderData = async () => {
		const res = await getOrderList({
			status: statusNum.value
		})
		if(res.code==0){
			uni.showToast({
				title:res.message,
				icon:'none'
			})
			return
		}
		listData.value = res.data
		
	}
</script>

<style lang="scss">
	.transport-box {
		.tabs-box {
			background-color: #FFFFFF;
			padding: 10rpx 0;
		}
		.zfb-list {
			padding: 30rpx;
		
			.zfb-item {
				background-color: #fff;
				padding: 30rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
		
				.item-top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 15rpx;
				}
		
				.item-desc,
				.item-bottom {
					display: flex;
					align-items: center;
					margin: 15rpx 0;
		
					.desc-name {
						color: #666;
					}
		
					.desc-value {
						color: #171717;
					}
				}
		
				.item-bottom {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					margin-bottom: 0;
		
					.bottom-desc {
						width: 220rpx;
					}
				}
			}
		}
	}
</style>